<template>
	<div class="refundXQ">
		<ul class="orderxq-footer">
			<li @click="refundmjly()"><span><img src="../../img-order/icon_liuyan@3x.png"/></span><span>我要留言</span></li>
			<li @click="ddxiangqing()"><span><img src="../../img-order/icon_order@3x.png"/></span><span>订单详情</span></li>
		</ul>
		<ul class="refund-orderxinxi">
			<li>退款编号：<span v-text="refundxinxi.refund_sn"></span></li>
			<li>申请时间：<span v-text="created"></span></li>
			<li>退款状态：<span v-if="refundxinxi.status=='WAIT_SELLER_AGREE'" v-text="refundxinxi.member_status==1?'您已成功发起了退款，请耐心等待商家处理':'买家发起了退款，请您及时处理'"></span>
				<span v-if="refundxinxi.status=='CLOSED'">退款关闭</span>
				<span v-if="refundxinxi.status=='SUCCESS'" v-text="refundxinxi.member_status==1?'商家已同意您的退款申请，退款成功':'您已同意买家的退款申请，退款成功'">退款成功</span>
				<span v-if="refundxinxi.status=='SELLER_REFUSE_BUYER'" v-text="refundxinxi.member_status==1?'商家拒绝了您的退款申请，请您修改后提交':'您拒绝了买家的退款申请，请等待买家回应'"></span>
				<span v-if="refundxinxi.status=='WAIT_ADMIN_AGREE'" v-text="refundxinxi.member_status==1?'商家同意了您的退款申请，请耐心等待管理员审核':'您同意了买家的退款申请，等待管理员审核'"></span>
				<span v-if="refundxinxi.status=='WAIT_SELLER_CONFIRM'" v-text="refundxinxi.member_status==1?'您已成功修改了退款申请，请耐心等待商家处理':'买家修改了退款申请，请您及时处理'"></span>
			</li>
			<li>商品总额：<span v-text="refundxinxi.total_fee+'元'"></span></li>
			<li>退款金额：<span v-text="refundxinxi.refund_fee+'元'"></span></li>
		</ul>
		<ul class="refund-orderxinxi">
			<li>收货情况：<span v-text="refundxinxi.shipped_text">已收到货，不退货只退款</span></li>
			<li>退款原因：<span v-text="refundxinxi.refund_reason">其他</span></li>
			<li>退款备注：<span v-text="refundxinxi.refund_desc">收到商品已经烂了</span></li>
		</ul>
		<div class="refund-imglist" v-if="imglist">
			<h3>图片举证</h3>
			<div><span v-for="item in imglist" @click="imgzhanshi(item)"><img :src="'http://www.ntyouxuan.com/'+item"/></span></div>
		</div>
		<div class="refundxq-btn" v-if="refundxinxi.status!='SUCCESS'&&refundxinxi.status!='CLOSED'&&refundxinxi.status!='WAIT_ADMIN_AGREE'&&refundxinxi.member_status==1">
			<span class="refundxq-qxtk" @click="qxtuikuan()">取消退款</span>
			<span @click="xgtkbtn()">修改退款</span>
			<span class="refundxq-ptjr" @click="refundxinxi.ask_customer!=1&&ptjrbtn()" v-text="refundxinxi.ask_customer!=1?'请求平台介入':'平台已经介入'"></span>
		</div>
		<div class="refundxq-btn refundxq-btn2" v-if="refundxinxi.member_status==2&&refundxinxi.status!='CLOSED'&&refundxinxi.status!='SUCCESS'&&refundxinxi.status!='WAIT_ADMIN_AGREE'&&refundxinxi.status!='SELLER_REFUSE_BUYER'">
			<span class="jqtuik" @click="jujuetui()">拒绝退款</span>
			<span class="" @click="tongyitui()">同意退款</span>
		</div>
		<h3 class="refund-fenge"><span>退款记录</span></h3>
		<div class="refund-mai1" v-for="item in message">
			<h3>{{item.owner_role}}<span v-text="item.created"></span></h3>
			<p v-for="(itemlist,key) in item.content" v-text="key==0?itemlist:key+'：'+itemlist"></p>
			<div v-if="item.pic_url" class="lyimglist">
				<span v-for="itemimg in item.pic_url" @click="imgzhanshi(itemimg)">
					<img :src="'http://www.ntyouxuan.com/'+itemimg"/>
				</span>
			</div>
		</div>
		<!--<div class="refund-mai2">
			<h3>买家<span>2018-01-20 12:59:59</span></h3>
			<p>买家申请了退款</p>
			<p class="refund-te">退款金额：20.00元</p>
			<p class="refund-yunfei">退运费金额：10.00元</p>
		</div>-->
		<imgview :imgurl="imgitem" v-if="imgitemshow" @imgfalse="imgfalsebtn"></imgview>
	</div>
	
</template>

<script>
	import refundcqCss from '@/css/refundcq.css'
	import imgview from '@/components/order-group/imgview'
	
	var furl = 'http://www.ntyouxuan.com/';
	export default{
		name:'refundxq',
		data(){
			return{
				user:0,
				refundid:0,
				refundxinxi:'',
				created:'',
				message:'',
				imglist:'',
				imgitem:'',
				imgitemshow:false
			}
		},
		components:{imgview},
		mounted:function(){
			this.refundid=this.$route.query.refundid;
			this.user=localStorage.getItem("nt_user");
			var self=this; 
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_refund&act=view",
				data:{'token':self.user,'refund_id':self.refundid},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.refundxinxi=res.retval;
						self.created=new Date(Number(res.retval.created)*1000).Format("yyyy-MM-dd hh:mm:ss");
						self.imglist=res.retval.image_list;
						var arrmsg;console.log(res.retval.message);
						for(var key in res.retval.message){
							res.retval.message[key].created=new Date(Number(res.retval.message[key].created)*1000).Format("yyyy-MM-dd hh:mm:ss");
							if(res.retval.message[key].owner_role=="buyer"){
								if(res.retval.member_status==1){
									res.retval.message[key].owner_role='我'
								}
							}else{
								if(res.retval.member_status==2){
									res.retval.message[key].owner_role='我'
								}
							}
							arrmsg=res.retval.message;
						}
						self.message=arrmsg;
					}else{
						history.go(-1);
					}
					
				}
			});
		},
		methods:{
			jujuetui:function(){
				this.$router.push({path:'/myorder/refundju',query:{refundid:this.refundid}});
			},
			tongyitui:function(){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=seller_agree",
					data:{'token':self.user,'refund_id':self.refundid},
					dataType:'json',
					success:function(res){
						if(res.done){
							window.location.reload();
						}
					}
				});
			},
			qxtuikuan:function(){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=cancel",
					data:{'token':self.user,'refund_id':self.refundid},
					dataType:"json",
					success:function(res){
						if(res.done){
							self.refundxinxi.status=res.retval.status;
						}
					}
				});
			},
			ptjrbtn:function(){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=ask_customer",
					data:{'token':self.user,'refund_id':self.refundid},
					dataType:"json",
					success:function(res){
						if(res.done){
							alert("平台已经介入，请等待...");
						}else{
							alert(res.msg);
						}
					}
				});
			},
			ddxiangqing:function(){
				this.$router.push({path:'/myorder/orderxq',query:{'orderid':this.refundxinxi.order_id}});
			},
			refundmjly:function(){
				this.$router.push({path:'/myorder/ordermjly',query:{'refundid':this.refundid}});
			},
			xgtkbtn:function(){
				this.$router.push({path:'/myorder/refund',query:{'refundid':this.refundid}});
			},
			imgzhanshi:function(imgdata){
				this.imgitem=imgdata;
				this.imgitemshow=true;
			},
			imgfalsebtn:function(){
				this.imgitemshow=false;
			}
		}
	}
</script>

<style>
	/*.refundxq-btn2{text-align: right;}*/
	.jqtuik{margin-right: 0.4rem;}
	.lyimglist{overflow: hidden;}
	.lyimglist>span{display: inline-block;float:left;width:1.2rem;height:1.2rem;margin-right: 0.4rem;margin-bottom: 0.24rem;overflow: hidden;position:relative;}
	.lyimglist>span>img{min-width:100%;min-height: 100%;max-height: 100%;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
</style>